<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        button {
            padding: 8px 16px;
            cursor: pointer;
        }
        textarea {
            width: 100%;
            min-height: 100px;
        }
        .response {
            border: 1px solid #ddd;
            padding: 10px;
            min-height: 200px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>API接口测试</h1>
    <div class="container">
        <div>
            <h3>测试 /api/chat 接口 (流式)</h3>
            <textarea id="streamMessage" placeholder="输入测试消息..."></textarea>
            <button onclick="testStreamApi()">发送流式请求</button>
            <div class="response" id="streamResponse">等待响应...</div>
        </div>
        
        <div>
            <h3>测试 /api/chat 接口 (非流式)</h3>
            <textarea id="nonStreamMessage" placeholder="输入测试消息..."></textarea>
            <button onclick="testNonStreamApi()">发送非流式请求</button>
            <div class="response" id="nonStreamResponse">等待响应...</div>
        </div>
        
        <div>
            <h3>测试 /v1/sessions/{sessionId}/messages 接口</h3>
            <input type="text" id="sessionId" placeholder="输入会话ID" value="default">
            <button onclick="testHistoryApi()">获取历史消息</button>
            <div class="response" id="historyResponse">等待响应...</div>
        </div>
        
        <div>
            <h3>测试后端服务状态</h3>
            <button onclick="testServerStatus()">检查服务状态</button>
            <div class="response" id="statusResponse">等待响应...</div>
        </div>
    </div>

    <script>
        // 测试流式API
        async function testStreamApi() {
            const message = document.getElementById('streamMessage').value;
            const responseElement = document.getElementById('streamResponse');
            responseElement.innerHTML = '发送请求中...';
            
            try {
                const response = await fetch('http://localhost:8001/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'text/event-stream'
                    },
                    body: JSON.stringify({
                        session_id: 'default',
                        message: message || '你好，这是一个测试消息',
                        use_rag: true,
                        use_tools: true,
                        stream: true
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                
                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let done = false;
                responseElement.innerHTML = '接收响应中...<br>';
                
                while (!done) {
                    const { value, done: doneReading } = await reader.read();
                    done = doneReading;
                    
                    if (value) {
                        const chunk = decoder.decode(value, { stream: true });
                        responseElement.innerHTML += chunk + '<br>';
                    }
                }
            } catch (error) {
                responseElement.innerHTML = `错误: ${error.message}`;
                console.error('流式API测试失败:', error);
            }
        }
        
        // 测试非流式API
        async function testNonStreamApi() {
            const message = document.getElementById('nonStreamMessage').value;
            const responseElement = document.getElementById('nonStreamResponse');
            responseElement.innerHTML = '发送请求中...';
            
            try {
                const response = await fetch('http://localhost:8001/api/chat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        session_id: 'default',
                        message: message || '你好，这是一个测试消息',
                        use_rag: true,
                        use_tools: true,
                        stream: false
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                
                const data = await response.json();
                responseElement.innerHTML = JSON.stringify(data, null, 2);
            } catch (error) {
                responseElement.innerHTML = `错误: ${error.message}`;
                console.error('非流式API测试失败:', error);
            }
        }
        
        // 测试历史消息API
        async function testHistoryApi() {
            const sessionId = document.getElementById('sessionId').value;
            const responseElement = document.getElementById('historyResponse');
            responseElement.innerHTML = '发送请求中...';
            
            try {
                const response = await fetch(`http://localhost:8001/v1/sessions/${sessionId}/messages?limit=100`);
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                
                const data = await response.json();
                responseElement.innerHTML = JSON.stringify(data, null, 2);
            } catch (error) {
                responseElement.innerHTML = `错误: ${error.message}`;
                console.error('历史消息API测试失败:', error);
            }
        }
        
        // 测试后端服务状态
        async function testServerStatus() {
            const responseElement = document.getElementById('statusResponse');
            responseElement.innerHTML = '发送请求中...';
            
            try {
                const response = await fetch('http://localhost:8001/api/status/system');
                
                if (!response.ok) {
                    throw new Error(`HTTP错误! 状态码: ${response.status}`);
                }
                
                const data = await response.json();
                responseElement.innerHTML = JSON.stringify(data, null, 2);
            } catch (error) {
                responseElement.innerHTML = `错误: ${error.message}`;
                console.error('服务状态测试失败:', error);
            }
        }
    </script>
</body>
</html>